<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>1_state</title>
    </head>
    <body>
        <!-- 准备好一个“容器” -->
        <div id="test"></div>
        <!-- 引入react核心库 -->
        <script type="text/javascript" src="../js/react.development.js"></script>
        <!-- 引入react-dom，用于支持react操作DOM -->
        <script type="text/javascript" src="../js/react-dom.development.js"></script>
        <!-- 引入babel，用于将JSX转为JS -->
        <script type="text/javascript" src="../js/babel.min.js"></script>


        <script type="text/babel">
            //1.创建类式组件
            class MyComponent extends React.Component{

                //构造器调用几次？——1次
                constructor(props){
                    super(props)
                    //初始化状态
                    this.state = {isHot:true,wind:"微风",}
                    this.changeWeather = this.changeWeather.bind(this)
                }


                //render是放在哪里的？-MyComponent的原型对象上，供实列使用。
                //render中的this是谁？-MyComponent的实列对象
                //render调用几次？——1 + n 次 1是初始化的那次，n是状态更新的次数
                render(){
                    //读取状态
                    const {isHot,wind} = this.state
                    return(
                        <h2 onClick= {this.changeWeather}>今天,天气很{isHot ? '炎热' : '凉爽'},{wind}</h2>
                    )
                }

                //changeWeather调用几次？——点几次调用几次
                changeWeather(){
                    //changeWeather是放在哪里的？-MyComponent的原型对象上，供实列使用。
                    //由于changeWeather是作为onClick的回调，所以不是通过实列调用的，是直接调用。
                    //类中的方法默认开启了局部的严格模式，所以changeWeather中的this未undefined。
                    console.log(this)

                    //获取原来的isHot值
                    const isHot = this.state.isHot

                    //严重注意：状态（state）不能直接更改，下面这行就是直接更改！！
                    //this.state.isHot = !isHot    这是错误写法

                    //严重注意：状态必须通过setState进行更新,且更新是一种合并，不是替换。
                    this.setState({isHot : !isHot})

                }

            }
            //2.渲染组件到页面
            ReactDOM.render(<MyComponent/>,document.getElementById('test'))
            /*
                执行了ReactDOM.render(<MyComponent/>......之后，发生了什么？
                1、React解析组件标签，找到了MyComponment组件。
                2、发现组件是使用类定义的，随后NEW出该类的实列，并通过该实列调用原型上的render方法。
                3、将render返回的虚拟DOM转为真实DOM，随后呈现在页面中。
            */
        </script>
    </body>
</html>
